<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }

        .friend_detail_box li {
            background-color: #fff;
            padding: 0.7rem;
            display: flex;
            align-items: center;
            margin-top: 0.45rem;
        }

        .friend_detail_box li .friend_img {
            width: 2.45rem;
            margin-right: 0.75rem;
            border: 0.5rem;
        }

        .friend_detail_box li .friend_name_id {
            line-height: 1.5;
        }

        .friend_name_id .friend_name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
        }

        .friend_name_id .friend_id {
            font-size: 0.6rem;
            color: #666;
        }

        .left_title,
        .right_cnt {
            font-size: 0.7rem;
            color: #333;
        }

        .left_title {
            flex: 1;
        }

        .right_cnt {
            flex: 2;
        }

        .right_icon {
            text-align: right;
        }

        .friend_remarks {
            display: flex;
            padding: 0.7rem;
            background-color: #fff;
            margin-top: 0.45rem;
        }

        .address_set_box {
            margin: 0.45rem 0;
        }

        .address_box,
        .to_top_box,
        .no_msg_box {
            padding: 0.7rem;
            display: flex;
            background-color: #fff;
            align-items: center;
            position: relative;
        }

        .to_top_box,
        .no_msg_box {
            padding: 0.3rem 0.7rem;
        }

        .address_box::after,
        .to_top_box::after {
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            background-color: #e6e6e6;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .right_btn {
            background-color: #e5e5e5;
            display: flex;
            align-items: center;
            width: 2.5rem;
            height: 1.5rem;
            border-radius: 2.5rem;
            position: relative;
        }

        .right_btn.active {
            background-color: #4dd865;
        }

        .right_btn span {
            width: 1.4rem;
            height: 1.4rem;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            left: 3%;
        }

        .right_btn span.active {
            left: calc(97% - 1.4rem);
        }
        /*动态*/

        .ta_dynamic_box {
            display: flex;
            background-color: #fff;
            align-items: center;
            padding: 0.7rem;
        }



        /*添加备注*/
        .edit_remarks_box {
            position: fixed;
            bottom: 0;
            background: #fff;
            width: 100vw;
            display: none;
        }
        .change_remarks{
          display: flex;
          align-items: center;
          height: 2.25rem;
        }
        .input_box{
          width: 85vw;
        }
        .input_box input{
          padding: 0.5rem;
        }
        .change_remarks .btn{
          width: 15vw;
          height: 2.25rem;
          line-height: 2.25rem;
          text-align: center;
          vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="app">
        <ul class="friend_detail_box">
            <li>
                <img :src="friend_info.head_img" alt="" class="friend_img">
                <div class="friend_name_id">
                    <div class="friend_name">{{friend_info.username}}</div>
                    <div class="friend_id">创客号：{{friend_info.maker_no}}</div>
                </div>
            </li>
        </ul>

        <div class="friend_remarks" onclick="add_remarks()">
            <div class="left_title">备注</div>
            <div class="right_cnt remarks_txt">{{friend_info.remarks}}</div>
        </div>


        <div class="address_set_box">
            <div class="address_box">
                <div class="left_title">所在地区</div>
                <div class="right_cnt">{{friend_info.address}}</div>
            </div>
            <div class="to_top_box">
                <div class="left_title">聊天置顶</div>
                <div class="right_btn" :class="{active:friend_info.message_top!=0,active:to_top}" @click="to_top_msg()">
                    <span :class="{active:friend_info.message_top!=0,active:to_top}"></span>
                </div>
            </div>
            <div class="no_msg_box">
                <div class="left_title">消息免打扰</div>
                <div class="right_btn" :class="{active:friend_info.message_disturb!=0,active:to_mdr}" @click="to_mdr_msg()">
                    <span :class="{active:friend_info.message_disturb!=0,active:to_mdr}"></span>
                </div>
            </div>
        </div>

        <div class="ta_dynamic_box" @click="open_new_win('five',friend_info.username,'朋友动态','')">
            <div class="left_title">TA的动态</div>
            <div class="right_cnt right_icon">
                <span class="aui-iconfont aui-icon-right"></span>
            </div>
        </div>
    </div>


    <div class="edit_remarks_box">
        <div class="change_remarks">
            <div class="input_box">
                <input type="text" name="" value="" placeholder="请输入备注">
            </div>
            <div class="btn" onclick="submit_remarks()">完成</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {

        // 初始化融云
        var rong = api.require('rongCloud2');
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                // console.log('初始化融云成功了')
            } else {
                api.toast({
                    msg: err.code
                });
            }
        });
        // 连接融云
        rong.connect({
            token: $api.getStorage('rong-token')
        }, function(ret, err) {
            if (ret.status == 'success') {
                // console.log('融云连接成功——————————' + JSON.stringify(ret));
            } else {
                alert(err.code)
            }
        });


        // 实例化vue 渲染数据
        var friend_data = new Vue({
            el: '.app',
            data: {
                friend_info: {},
                to_top: false,
                to_mdr: false
            },
            mounted: function() {
                var $_this = this;
                api.ajax({
                    url: window.Url.Community_getUserDetails,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                            user_id: api.pageParam.target_id
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        if (ret.re == 1) {
                            // console.log('获取到的好友的详细资料---' + JSON.stringify(ret))
                            $_this.friend_info = ret.data;

                            // 判断当前的消息置顶和消息免打扰的状态
                            if ($_this.friend_info.message_top != 0) {
                                $_this.to_top = true;
                            }
                            if ($_this.friend_info.message_disturb != 0) {
                                $_this.to_mdr = true;
                            }
                        }
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            },

            methods: {
                // 置顶和消息免打扰
                to_top_msg: function() {
                    var $_this = this;
                    $_this.to_top = !$_this.to_top;
                    $_this.set_friend_msg_state();

                },
                to_mdr_msg: function() {
                    var $_this = this;
                    $_this.to_mdr = !$_this.to_mdr;
                    $_this.set_friend_msg_state();
                },

                set_friend_msg_state: function() {
                    var $_this = this;
                    var top_num = 0;
                    var mdr_num = 0;
                    if ($_this.to_top) {
                        top_num = 1;
                        rong.setConversationToTop({
                            conversationType: 'PRIVATE',
                            targetId: api.pageParam.target_id,
                            isTop: true
                        }, function(ret, err) {
                            if(ret.status ==  'success'){
                              console.log('融云设置置顶消息成功')
                            }else{
                              api.toast({
                                  msg: '融云置顶消息失败'
                              });
                            }
                        })
                    } else {
                        top_num = 0;
                        rong.setConversationToTop({
                            conversationType: 'PRIVATE',
                            targetId: api.pageParam.target_id,
                            isTop: false
                        }, function(ret, err) {
                          if(ret.status ==  'success'){
                            console.log('融云取消置顶消息成功')
                          }else{
                            api.toast({
                                msg: '融云置顶消息失败'
                            });
                          }
                        })
                    }

                    if ($_this.to_mdr) {
                        mdr_num = 1;
                        rong.setConversationNotificationStatus({
                            conversationType: 'PRIVATE',
                            targetId: api.pageParam.target_id,
                            notificationStatus: 'DO_NOT_DISTURB'
                        }, function(ret, err) {
                            if (ret.status == 'success'){
                              console.log('融云免打扰开启')
                            }
                            else{
                              api.toast({
                                  msg: err.code
                              });
                            }
                        })
                    } else {
                        mdr_num = 0;
                        rong.setConversationNotificationStatus({
                            conversationType: 'PRIVATE',
                            targetId: api.pageParam.target_id,
                            notificationStatus: 'NOTIFY'
                        }, function(ret, err) {
                            if (ret.status == 'success'){
                              console.log('融云免打扰取消')
                            }
                            else{
                              api.toast({
                                  msg: err.code
                              });
                            }
                        })
                    }

                    api.ajax({
                        url: window.Url.Community_editFriend,
                        method: 'post',
                        data: {
                            values: {
                                type: 1,
                                token: $api.getStorage('user_data').token,
                                user_id: api.pageParam.target_id,
                                message_top: top_num,
                                message_disturb: mdr_num
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // alert(JSON.stringify(ret));
                            console.log('好友消息置顶或免打扰设置成功')
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                }



            }


        })

    };



    //打开提示框
    var dialog = new auiDialog({});

    function open_diglog() {

        // 初始化融云
        var rong = api.require('rongCloud2');
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                // console.log('初始化融云成功了')
            } else {
                api.toast({
                    msg: err.code
                });
            }
        });
        // 连接融云
        rong.connect({
            token: $api.getStorage('rong-token')
        }, function(ret, err) {
            if (ret.status == 'success') {
                // console.log('融云连接成功——————————' + JSON.stringify(ret));
            } else {
                alert(err.code)
            }
        });


        $('.cover').show();
        dialog.alert({
            title: "删除联系人",
            msg: '您确定要删除该联系人？',
            buttons: ['取消', '确定']
        }, function(ret) {
            if (ret) {
                api.execScript({
                    script: 'close_cover();'
                });

                if (ret.buttonIndex == 2) {
                    // 调用删除好友的接口
                    api.ajax({
                        url: window.Url.Community_delFriend,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                user_id: api.pageParam.target_id
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // alert( JSON.stringify( ret ) );
                            if (ret.re == 1) {
                                // 删除好友后移除与该好友的对话列表
                                rong.removeConversation({
                                    conversationType: 'PRIVATE',
                                    targetId: api.pageParam.target_id
                                }, function(ret, err) {
                                    api.toast({
                                        msg: ret.status
                                    });
                                })

                                setTimeout(function() {
                                    api.closeWin({});
                                }, 2000)
                            }
                            api.toast({
                                msg: ret.info,
                                duration: 2000,
                                location: 'bottom'
                            });

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                }
            }
        })
    }




    // 打开新的窗口
    function open_new_win(index, title, type, img_src) {
        api.openWin({
            name: 'four_' + index + '_header',
            url: 'four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                type: type,
                img_src: img_src,
                friend_id: api.pageParam.target_id
            }
        });
    }



    // 添加备注
    function add_remarks(){
      $('.edit_remarks_box').show();
      $('.edit_remarks_box .input_box input').focus();
    }

    // 提交备注
    function submit_remarks(){
      if($('.input_box input').val()==""){
        $('.edit_remarks_box').hide();
      }else{
        $('.edit_remarks_box').hide();
        api.ajax({
            url: window.Url.Community_editFriend,
            method: 'post',
            data: {
                values: {
                    token:$api.getStorage('user_data').token,
                    type:1,
                    remarks:$('.input_box input').val(),
                    user_id:api.pageParam.target_id
                }
            }
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                api.toast({
                    msg: ret.info,
                    duration: 2000,
                    location: 'bottom'
                });

                if(ret.re==1){
                  $('.remarks_txt').html($('.input_box input').val());
                  $('.input_box input').val("");
                }

            } else {
                alert( JSON.stringify( err ) );
            }
        });

      }
    }
</script>

</html>
